<script module lang="ts">
    import { defineMeta } from "@storybook/addon-svelte-csf";
    import AvatarList from "./AvatarList.svelte";
    import { fn } from "storybook/test";
    import img1 from "../../assets/avatars/1.png";
    import img2 from "../../assets/avatars/2.png";
    import img3 from "../../assets/avatars/3.png";
    import img4 from "../../assets/avatars/4.png";

    const { Story } = defineMeta({
        title: "Components/Base/AvatarList",
        component: AvatarList,
        tags: ["autodocs"],
        argTypes: {
            size: {
                control: "select",
                options: ["small", "large"],
            },
        },
        args: {},
    });
</script>

<Story name="Default">
    {#snippet template(args)}
        <AvatarList
            data={[
                { title: "头像1", src: img1 },
                { title: "头像2", src: img2 },
                { title: "头像3", src: img3 },
                { title: "头像4", src: img4 },
            ]}
        ></AvatarList>
    {/snippet}
</Story>

<Story name="Max" args={{ max: 3 }}>
    {#snippet template(args)}
        <AvatarList
            {...args}
            data={[
                { title: "头像1", src: img1 },
                { title: "头像2", src: img2 },
                { title: "头像3", src: img3 },
                { title: "头像4", src: img4 },
            ]}
        ></AvatarList>
    {/snippet}
</Story>

<Story name="Gutter" args={{ gutter: 20 }}>
    {#snippet template(args)}
        <AvatarList
            {...args}
            data={[
                { title: "头像1", src: img1 },
                { title: "头像2", src: img2 },
                { title: "头像3", src: img3 },
                { title: "头像4", src: img4 },
            ]}
        ></AvatarList>
    {/snippet}
</Story>
